<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red-bg{background: red}
        .green-bg{background: green}
    </style>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <p>姓名：{{ person.name }}，年龄：{{ person.age }}岁, 性别：{{ person.gender }}</p>

    <p v-if="person.age >=18">{{ person.name }}是成年人</p>
    <p v-else>{{ person.name }}是未成年人</p>
    <p v-show="person.gender=='男'">{{ person.name }}是男的 </p>
    <p v-show="person.gender=='女'">{{ person.name }}是女的 </p>

    <p>姓名:<input type="text" v-model="person.name"></p>
    <p>年龄:<input type="text" v-model="person.age"></p>
    <p>性别:<input type="text" v-model="person.gender"></p>


    <table border="1px" v-bind:width="width">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="per in persons" v-bind:class="per.gender=='男'?'red-bg':'green-bg'" v-on:click="showPerson(per)">
            <td>{{ per.name }}</td>
            <td>{{ per.age }}</td>
            <td>{{ per.gender }}</td>
        </tr>
    </table>
</div>

<script src="js/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            width: "400px",
            person: {
                name: '张三',
                age: 18,
                gender: '男'
            },
            persons: [
                {
                    name: '张三',
                    age: 18,
                    gender: '男'
                },
                {
                    name: '李四',
                    age: 20,
                    gender: '女'
                },
                {
                    name: '王五',
                    age: 22,
                    gender: '男'
                },
                {
                    name: '赵六',
                    age: 24,
                    gender: '女'
                },

            ],
            methods: {
                showPerson(per){
                    alert("姓名:"+per.name+",年龄:"+per.age+",性别:"+per.gender)
                }
             },
            mounted
        }
    })
</script>
</body>
</html>